<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="粉丝订单"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 日期筛选器 -->
      <view class="p-20rpx bg-white">
        <view class="date-filter" @click="openDatePicker">
          <text class="date-range">{{ dateRange }}</text>
          <uni-icons type="calendar" size="20" color="#ff9500"></uni-icons>
        </view>
      </view>

      <!-- 订单列表 -->
      <view class="orders-list">
        <view
          v-for="order in ordersList"
          :key="order.id"
          class="order-item"
          @click="goToOrderDetail(order)"
        >
          <!-- 变动时间和状态 -->
          <view class="order-header">
            <view class="time-info">
              <text class="time-label">变动时间：</text>
              <text class="time-value">{{ order.changeTime }}</text>
            </view>
            <view :class="['status-badge', order.status]">
              <text class="status-text">{{ order.statusText }}</text>
            </view>
          </view>

          <!-- 用户信息 -->
          <view class="user-info">
            <image :src="order.avatar" class="user-avatar" mode="aspectFill" />
            <view class="user-details">
              <view class="user-name-row">
                <text class="user-name">{{ order.userName }}</text>
                <view v-if="order.isMember" class="member-badge">
                  <text class="member-text">会员</text>
                </view>
              </view>
              <text class="user-phone">{{ order.phone }}</text>
            </view>
          </view>

          <!-- 订单数据 -->
          <view class="order-data">
            <view class="data-row">
              <text class="data-label">粉丝积分：</text>
              <text class="data-value">{{ order.fansPoints }}</text>
            </view>
            <view class="data-row">
              <text class="data-label">奖励抵用券：</text>
              <text class="data-value">{{ order.rewardCoupon }}</text>
            </view>
            <view class="data-row">
              <text class="data-label">未发效抵用券：</text>
              <text class="data-value">{{ order.inactiveCoupon }}</text>
            </view>
          </view>

          <!-- 订单编号 -->
          <view class="order-number-section">
            <text class="order-label">订单编号：</text>
            <view class="number-row">
              <text class="order-number">{{ order.orderNumber }}</text>
              <view v-if="order.isMember" class="member-badge-small">
                <text class="member-text-small">会员</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="ordersList.length === 0 && !loading" class="empty-state">
          <text class="empty-text">暂无订单数据</text>
        </view>

        <!-- 加载状态 -->
        <view v-if="loading" class="loading-state">
          <uni-load-more status="loading" />
        </view>

        <!-- 加载更多 -->
        <view v-if="hasMore && ordersList.length > 0" class="load-more">
          <uni-load-more :status="loadMoreStatus" @clickLoadMore="loadMore" />
        </view>

        <!-- 没有更多 -->
        <view v-if="!hasMore && ordersList.length > 0" class="no-more">
          <text class="no-more-text">没有更多了</text>
        </view>
      </view>
    </view>

    <!-- 日期范围选择器 -->
    <DateRangePicker
      ref="dateRangePickerRef"
      v-model="dateRangeValue"
      :show-label="false"
      @confirm="handleDateConfirm"
    />
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import DateRangePicker from "@/pages/index/pointsDetail/components/DateRangePicker.vue";

// 日期范围
const startDate = ref("2025-07-21");
const endDate = ref("2025-10-21");

const dateRange = computed(() => {
  return `${startDate.value} - ${endDate.value}`;
});

// 日期范围值（用于DateRangePicker组件）
const dateRangeValue = ref({
  start: startDate.value,
  end: endDate.value,
});

// 日期选择器引用
const dateRangePickerRef = ref(null);

// 订单列表数据
const ordersList = ref([]);

// 分页参数
const pageNum = ref(1);
const pageSize = ref(20);
const hasMore = ref(true);
const loading = ref(false);
const loadMoreStatus = ref("more");

// 模拟订单数据
const mockOrdersData = [
  {
    id: 1,
    changeTime: "2025-10-20 15:07:04",
    userName: "wd_8pdzb45i8u",
    phone: "190****0465",
    avatar: "/static/logo.png",
    isMember: true,
    fansPoints: "0.00",
    rewardCoupon: "0.0000",
    inactiveCoupon: "0.00",
    orderNumber: "19801688505****6646",
    status: "refunded",
    statusText: "已退款",
  },
  {
    id: 2,
    changeTime: "2025-10-17 13:05:23",
    userName: "wd_ijculkynpc",
    phone: "150****6595",
    avatar: "/static/logo.png",
    isMember: true,
    fansPoints: "87.90",
    rewardCoupon: "0.0000",
    inactiveCoupon: "4.3950",
    orderNumber: "197905102l1****6284",
    status: "success",
    statusText: "交易成功",
  },
];

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 打开日期选择器
const openDatePicker = () => {
  dateRangePickerRef.value?.open();
};

// 处理日期确认
const handleDateConfirm = (range) => {
  startDate.value = range.start;
  endDate.value = range.end;

  // 重新加载数据
  pageNum.value = 1;
  ordersList.value = [];
  hasMore.value = true;
  loadOrdersData();
};

// 跳转到订单详情
const goToOrderDetail = (order) => {
  uni.navigateTo({
    url: `/pages/mine/shareTrendy/orderRewardDetail?orderId=${order.id}`,
  });
};

// 加载订单数据
const loadOrdersData = async () => {
  if (loading.value) return;

  loading.value = true;
  loadMoreStatus.value = "loading";

  try {
    // TODO: 替换为真实 API 调用
    // 模拟API请求延迟
    await new Promise((resolve) => setTimeout(resolve, 500));

    // 模拟数据
    if (pageNum.value === 1) {
      ordersList.value = mockOrdersData;
    } else {
      // 模拟没有更多数据
      hasMore.value = false;
    }

    loadMoreStatus.value = hasMore.value ? "more" : "noMore";
  } catch (error) {
    console.error("加载订单数据失败:", error);
    uni.showToast({
      title: "加载失败，请重试",
      icon: "none",
    });
    loadMoreStatus.value = "more";
  } finally {
    loading.value = false;
  }
};

// 加载更多
const loadMore = () => {
  if (!hasMore.value || loading.value) return;

  pageNum.value += 1;
  loadOrdersData();
};

// 页面加载时获取数据
onMounted(() => {
  loadOrdersData();
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

// 日期筛选器
.date-filter {
  background-color: #f5f5f5;
  border-radius: 50rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date-range {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

// 订单列表
.orders-list {
  padding: 32rpx 32rpx;
}

.order-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;

  &:active {
    opacity: 0.9;
  }
}

// 订单头部（时间和状态）
.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.time-info {
  display: flex;
  align-items: center;
}

.time-label {
  font-size: 24rpx;
  color: #666;
}

.time-value {
  font-size: 24rpx;
  color: #333;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 6rpx 16rpx;
  border-radius: 6rpx;

  &.success {
    background-color: #52c41a;
  }

  &.refunded {
    background-color: #ff4d4f;
  }
}

.status-text {
  font-size: 22rpx;
  color: #fff;
}

// 用户信息
.user-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  flex-shrink: 0;
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.user-name-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.user-name {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.member-badge {
  display: inline-flex;
  align-items: center;
  padding: 4rpx 12rpx;
  background-color: #52c41a;
  border-radius: 4rpx;
}

.member-text {
  font-size: 20rpx;
  color: #fff;
}

.user-phone {
  font-size: 24rpx;
  color: #999;
}

// 订单数据
.order-data {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.data-label {
  font-size: 24rpx;
  color: #666;
}

.data-value {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}

// 订单编号
.order-number-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16rpx;
  border-top: 1rpx solid #f5f5f5;
}

.order-label {
  font-size: 24rpx;
  color: #666;
}

.number-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.order-number {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}

.member-badge-small {
  display: inline-flex;
  align-items: center;
  padding: 2rpx 8rpx;
  background-color: #52c41a;
  border-radius: 4rpx;
  flex-shrink: 0;
}

.member-text-small {
  font-size: 18rpx;
  color: #fff;
}

// 空状态
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

// 加载状态
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

// 加载更多
.load-more {
  padding: 20rpx 0;
}

// 没有更多
.no-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.no-more-text {
  font-size: 24rpx;
  color: #999;
}
</style>
